import React from "react";
import Select from 'antd/lib/select';
import Checkbox from 'antd/lib/checkbox';
import Col from 'antd/lib/col';
import Row from 'antd/lib/row';
import Input from 'antd/lib/input';
import 'antd/dist/antd.less'
import { currentUser } from "@/services/auth";

export default class workflowTable extends React.Component {
  state = {
    loading: true,
    id: 0,
    userid: currentUser.id,
    name: "",
    orgunitid: 0,
    tabletypeid: 'employee,0',
    is_active: false,
  };
  // componentDidMount() {
  //   const userId = this.props.userId || currentUser.id;
  // }
  componentWillMount() {

    this.refreshData(this.props.data);
  }
  componentDidMount() {
    　　this.props.onRef(this);
  }
   componentWillUnmount() {
    const data=
      {
        id: this.state.id,//
        userid: this.state.userid,//--操作员ID
        name: this.state.name,//--名称
        orgunitid: this.state.orgunitid,
        tabletypeid: this.state.tabletypeid,
        is_active: this.state.is_active,
      }
    　　this.props.childchange(data);
  }
     // 这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
    this.refreshData(nextProps.data);
}

  refreshData(data ) {
          this.setState({
            id: data.id,//
            userid: data.userid,//--操作员ID
            name: data.name,//--名称
            orgunitid: data.orgunitid,
            tabletypeid: data.tabletypeid,
            is_active: data.is_active,
            loading: false,
          });
  }

  render() {
    if (this.state.loading) return null;
    return(
      <div>
        <Row style={{ marginBottom: 5}}>
        <Col span={2}><div  style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
        <span style={{color:'#f81d22',fontSize:12}}>*</span>单据类型:</div></Col>
        <Col span={6}>
              <Select style={{ width:  "100%" }}
                    value={this.state.tabletypeid}
                    onChange={value => this.setState({tabletypeid:value})}>
              {(this.props.billtypedata || []).map(item => (
                <Select.Option key={item.code+','+item.type} value={item.code+','+item.type}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col>

          <Col span={2}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
          <span style={{color:'#f81d22',fontSize:12}}>*</span>名称:</div></Col>
				  <Col span={6}>
          <Input
                value={this.state.name}
                onChange={e => this.setState({name:e.target.value})}
                placeholder="名称"
              />
				  </Col>
          <Col span={2}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
          启用:</div></Col>
				  <Col span={6}>
          <Checkbox checked={this.state.is_active} style ={{marginTop:"5px"}}
          onChange={e => this.setState({is_active:e.target.checked})}>启用</Checkbox>
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
        <Col span={2}><div  style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
        <span style={{color:'#f81d22',fontSize:12}}>*</span>部门:</div></Col>
        <Col span={6}>
              <Select style={{ width:  "100%" }}
              showSearch
              optionFilterProp="children"
              value={this.state.orgunitid} 
              onChange={value => this.setState({orgunitid:value})}>
                <Select.Option key={0} value={0}>{'全部'}</Select.Option>
              {(this.props.departmentdata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col>
          <Col span={2}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            录入人:</div></Col>
				  <Col span={6}>
            <Select style={{ width:  "100%" }}
                      showSearch
                      disabled ={true}
                      optionFilterProp="children"
                        value={this.state.userid}
                        onChange={value => this.setState({userid:value})} >
                {(this.props.employeeuserdata || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
              </Select>
				  </Col>
        </Row>
      </div>
    );
  };
}
